import React, { Component } from "react";
import Header from "./Header";
import Main from "./Main";
import Footer from "./Footer";
import "./ToDoList.css";

export default class ToDoList extends Component {
  state = {
    todoList: [
      { id: 1, title: "吃饭", done: false },
      { id: 2, title: "睡觉", done: false },
      { id: 3, title: "敲代码", done: true },
    ],
  };
  addItem(val) {
    this.setState({
      todoList: [
        ...this.state.todoList,
        {
          id: Math.random(),
          title: val,
          done: false,
        },
      ],
    });
  }
  chooseItem(id) {
    let newList = this.state.todoList.map((item) => {
      return item.id === id ? { ...item, done: !item.done } : item;
    });
    this.setState({
      todoList: newList,
    });
  }
  deleteItem(id) {
    let newList = this.state.todoList.filter((item) => item.id !== id);
    this.setState({
      todoList: newList,
    });
  }
  clearAll() {
    let newList = this.state.todoList.filter((item) => item.done !== true);
    this.setState({
      todoList: newList,
    });
  }
  chooseAll(done) {
    let newList = this.state.todoList.map((item) => {
      return { ...item, done: !done };
    });
    this.setState({
      todoList: newList,
    });
  }
  render() {
    let { todoList } = this.state;
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addItem={this.addItem.bind(this)}></Header>
          <Main
            todoList={todoList}
            chooseItem={this.chooseItem.bind(this)}
            deleteItem={this.deleteItem.bind(this)}
          ></Main>
          <Footer
            todoList={todoList}
            clearAll={this.clearAll.bind(this)}
            chooseAll={this.chooseAll.bind(this)}
          ></Footer>
        </div>
      </div>
    );
  }
}
